<template>

    <div style=" background-color: #fff;height: 14vw;">
      <span class="n-title" >欢迎来到情侣小窝 <van-icon name="like" /></span>

      <span class="n-addnote">
        <!-- <van-icon name="add" size="6vw" color="#5dacdd" @click="onAddNote"/> -->
      </span>
    </div>

    <div style="height:6px;background-color: rgb(240,240,240);"></div>


    <div class="shade"></div>
    <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker @confirm="onConfirm" :min-date="minDate" @cancel="showPicker = false" />
    </van-popup>
    

      <van-tabs v-model="active" >
        <van-tab title="登录">
            <!-- <van-form @submit="onSubmit" class="ins"> -->
              <van-cell-group inset>
                <van-field
                  v-model="userPhone"
                  name="电话号码"
                  label="电话号码"
                  placeholder="电话号码"
                />
                <van-field
                  v-model="password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                />
              </van-cell-group>
              <div style="margin: 8vw;">
                <van-button round block type="primary" @click="onLogin">登录</van-button>
              </div>
            <!-- </van-form> -->
        </van-tab>
        <van-tab title="注册">
              <van-cell-group inset>
                <van-field
                  v-model="userPhone"
                  name="电话号码"
                  label="电话号码"
                  placeholder="电话号码"
                />
                <van-field
                  v-model="password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="密码"
                />
                <van-field
                  v-model="username"
                  name="昵称"
                  label="昵称"
                  placeholder="昵称"
                />
                <van-field
                  v-model="birthday"
                  is-link
                  readonly
                  name="datePicker"
                  label="生日"
                  placeholder="点击选择时间"
                  @click="showPicker = true"
                />
              </van-cell-group>
              <div style="margin: 8vw">
                <van-button round block type="primary" @click="onRegister">注册</van-button>
              </div>
        </van-tab>
      </van-tabs>

  </template>
  <script>
  import { showToast,showFailToast } from 'vant'
  import axios from 'axios'
  
  
  export default {
    name: 'LoginView',
    data () {
      return{
        minDate: new Date(1985, 0, 1),
        showPicker:false,
        active:0,
        userPhone:"",
        password:"",
        username:"",
        birthday:"",
      }
    },
    // props: ['login'],
    created () {
    },
    methods: {
     onLogin(){
      //  成功则存入本地缓存，并跳转到home
      //  localStorage.setItem("userPhone",this.userPhone)
      //  localStorage.setItem("password", this.password)
      if(this.userPhone==""||this.password==""){
        showToast("请填写完整！")
        return
      }
      axios.get("/api/Login/login",{
            params:{
              userPhone: this.userPhone,
              password: this.password
            }
          }).then((res)=>{
            console.log(res.data.data)
            if(res.data.data==""){showFailToast("电话号码或密码错误")}
            else{
              localStorage.setItem("userPhone",res.data.data.userPhone)
              localStorage.setItem("password", res.data.data.password)
              this.$router.replace("/home/diary")
            }
          }).catch((err)=>{console.log(err)})
      
     },
     onRegister(){
      if(this.userPhone==""||this.password==""||this.username==""||this.birthday==""){
        showToast("请填写完整！")
        return
      }
      var format = (new Date(this.birthday)).getTime()
      console.log(format)
      axios.get("/api/Login/register",{
            params:{
              userPhone: this.userPhone,
              password: this.password,
              username: this.username,
              birthday: format,
            }
          }).then((res)=>{
            console.log(res)
            if(res.data.data==""){showFailToast("该电话号码已注册")}
            else{
              localStorage.setItem("userPhone",res.data.data.userPhone)
              localStorage.setItem("password", res.data.data.password)
              localStorage.setItem("id", res.data.data.userId)
              this.$router.push("/pair")
              }
          }).catch((err)=>{console.log(err)})
      
      //跳转到绑定界面
     },
     onConfirm({selectedValues}){
      this.birthday = selectedValues.join('-');
      this.showPicker = false;
     }
  
    }
  }
  </script>

  <style>
  
  </style>
  